<template>
  <BaseTable
    ref="baseTableRef"
    :isShowAddBtn="true"
    :showSetColumn="false"
    :showDownload="false"
    isScroll
    :apiUrl="getHostList"
    placeholder="请输入计算节点名称"
    :columns="columns"
    :height="height"
    addText="同步"
    :isPadding0="false"
    @handleSubColumnSetting="handleSubColumnSetting"
    @handleEditOrAdd="handleSync"
  >
    <!-- <template #operatBtns>
      <div style="width: 160px">
        <ga-button type="primary" class="mr_8" @click="$emit('handleEditOrAdd')">
        <ga-button type="primary" @click="$emit('handleEditOrAdd')"> 同步 </ga-button>
          添加主机
        </ga-button>
      </div>
    </template> -->
    <template #enabled="{ record }">
      <ga-switch
        :checked-value="1"
        :unchecked-value="0"
        size="mini"
        v-model="record.enabled"
        @change="handleEnabledChange(record)"
      />
    </template>
  </BaseTable>
  <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getHostList, sync, updateStatus } from "@/api/hostMgmt";
import { columns } from "./columns";
import { Message } from "@garco-design/web-vue";

const baseTableRef = ref(null);
defineProps({
  // 表格高度
  height: {
    type: String,
    default: "calc(100vh - 236px)",
  },
});
// 同步
const handleSync = async () => {
  try {
    const { code } = await sync();
    if (code === 20000) Message.success("操作成功，后台同步中");
  } catch (err) {
    console.log(err);
  }
};
// 是否启用
const handleEnabledChange = async (record) => {
  try {
    const { id, enabled } = record;
    const { code } = await updateStatus(id, { enabled });
    if (code === 20000) Message.success("操作成功");
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => {});
</script>
